// 计算font-size值
function setFont() {
  // 获取浏览器宽度
  let htmlWidth = document.querySelector('html').clientWidth
  // 找到临界点，判断最大宽度和最小宽度
  if (htmlWidth < 1024) htmlWidth = 1024
  if (htmlWidth > 1920) htmlWidth = 1920
  // 计算fontSize
  let fontSize = htmlWidth / 80 + 'px'
  // 把fontSize值，设置给html元素即可
  document.querySelector('html').style.fontSize = fontSize
}
setFont() // 刷新页面，马上计算font-size值

// 获取元素
let username = document.querySelector(".uname")
let score = document.querySelector(".score")
let salary = document.querySelector(".money")
let btn = document.querySelector(".tianjia")
let tbody = document.querySelector("tbody")
let you = document.querySelector(".you")
let usernameArr = []
let scoreArr = []
let salaryArr = []
// 添加点击事件
btn.addEventListener('click', function () {
  let g = username.value
  let x = score.value
  let y = salary.value
  usernameArr.push(g)
  scoreArr.push(x)
  salaryArr.push(y)
  you.style.display = 'block'
  let tr = document.createElement('tr')
  tr.innerHTML = `<tr>
                    <td>${g}</td>
                    <td>${x}</td>
                    <td>${y}</td>
                  </tr>`
  tbody.appendChild(tr)
  username.value = ''
  score.value = ''
  salary.value = ''
  line()
  bar()
})
//折线图
function line() {
  let mychart = echarts.init(document.querySelector(".line"));
  let option = {
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: usernameArr,
      //轴线上的文字设置
      axisLabel: {
        color: '#4c9bfd',
      },
      //轴线设置
      axisLine: {
        lineStyle: {
          color: '#4c9bfd',
        },
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false,
      },
      //轴线上的文字设置
      axisLabel: {
        color: '#4c9bfd',
      },
      //轴线设置
      axisLine: {
        lineStyle: {
          color: '#4c9bfd',
        },
      },
    },
    series: [
      {
        data: scoreArr,
        smooth: 0.6,
        type: 'line',
        areaStyle: {
          normal: {
            // color: '#0061ce',
            color: {
              // type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: '#00fffb',
                },
                {
                  offset: 1,
                  color: '#0061ce',
                },
              ],
              globalCoord: false,
            },
          },
        },
        itemStyle: {
          normal: {
            //折线点颜色
            color: '#0061ce',
            lineStyle: {
              //折线颜色
              // color: '#0061ce',
              color: {
                // type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: '#00fffb',
                  },
                  {
                    offset: 1,
                    color: '#0061ce',
                  },
                ],
                globalCoord: false,
              },
            },
          },
        },
      },
    ],
  };
  mychart.setOption(option);
}
//柱状图
function bar() {
  let mychart = echarts.init(document.querySelector(".bar"));
  let option = {
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 0.8,
        colorStops: [
          {
            offset: 0,
            color: '#00fffb',
          },
          {
            offset: 1,
            color: '#0061ce',
          },
        ],
        globalCoord: false,
      },
    },
    // color: "rgb(245,118,150)",
    xAxis: {
      type: 'category',
      data: usernameArr,
      //轴线上的文字设置
      axisLabel: {
        color: '#4c9bfd',
      },
      //轴线设置
      axisLine: {
        // show:false,
        lineStyle: {
          color: '#4c9bfd',
        },
      },
    },
    yAxis: {
      type: 'value',
      scale: true,
      min: 0,
      splitLine: {
        show: false,
      },
      //轴线上的文字设置
      axisLabel: {
        color: '#4c9bfd',
      },
      //轴线设置
      axisLine: {
        // show:false,
        lineStyle: {
          color: '#4c9bfd',
        },
      },
    },
    series: [
      {
        barWidth: 30,
        data: salaryArr,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(0, 240, 255, 0.3)',
        },
      },
    ],
  };
  mychart.setOption(option);
}